﻿@page "/getting-started/installation"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="Installation" SubTitle="Getting started with MudBlazor for faster and easier web development.">
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Description>
                    <MudAlert Severity="Severity.Info">
                        <MudText>We provide ready to run blazor templates that come pre-configured with everything you need to get going faster. Read more on our <MudLink Href="/getting-started/templates">Template page</MudLink>.</MudText>
                    </MudAlert>
                </Description>
            </SectionHeader>
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Manual Install">
                <SubTitle>1. Install the package</SubTitle>
                <Description>Find the package through NuGet Package Manager or install it with following command.</Description>
            </SectionHeader>
            <MarkdownInstallPackage />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>2. Add Imports</SubTitle>
                <Description>After the package is added, you need to add the following in your <CodeInline>_Imports.razor</CodeInline></Description>
            </SectionHeader>
            <MarkdownAddImports />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>3. Add CSS & Font references</SubTitle>
                <Description> Add the following to your HTML head section, it's either <CodeInline>index.html</CodeInline> or <CodeInline>_Host.cshtml</CodeInline> depending on whether you're running WebAssembly or Server.</Description>
            </SectionHeader>
            <MarkdownAddReferences />
            <MudText GutterBottom="true" Class="mt-4">
                <b class="mud-secondary-text">Note:</b> If you're installing on a fresh Blazor template make sure to remove everything in your <CodeInline SecondaryColor="true">site.css</CodeInline> and remove the <CodeInline SecondaryColor="true">bootstrap.min.css</CodeInline> completely from either <CodeInline>index.html</CodeInline> or <CodeInline>_Host.cshtml</CodeInline>.
            </MudText>
            <MudText GutterBottom="true" Class="mt-4">
                In the HTML body section of either <CodeInline>index.html</CodeInline> or <CodeInline>_Host.cshtml</CodeInline> add this:
            </MudText>
            <MarkdownAddJsReference />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>4. Register Services</SubTitle>
            </SectionHeader>
            <MudText GutterBottom="true">
                <b>For Blazor WebAssembly</b> add the following to your <CodeInline>Program.Main</CodeInline>
            </MudText>
            <MarkdownRegisterServicesWebAssembly />
            <MudText GutterBottom="true" Class="mt-6">
                <b>For Blazor Server</b> add the following in your <CodeInline>Startup.cs</CodeInline> under <CodeInline>ConfigureServices</CodeInline>
            </MudText>
            <MarkdownRegisterServicesServer />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>5. Add Components</SubTitle>
                <Description>Add the following components to your <CodeInline>MainLayout.razor</CodeInline> or <CodeInline>App.razor</CodeInline> note that the <CodeInline>ThemeProvider</CodeInline> is essential for MudBlazor but the rest is optional.</Description>
            </SectionHeader>
            <MarkdownAddComponents />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Ready for More?">
                <Description>Now you know how to install MudBlazor, but a common pitfall is to jump straight into different components. We recommend that you read our Layout page to learn about basic project structure and different ways to use our main layout components.</Description>
            </SectionHeader>
            <div class="d-flex flex-row flex-wrap mud-width-full">
                <MudList Clickable="true" Class="flex-grow-1 flex-shrink-0 mud-paper-outlined rounded py-0 ma-2">
                    <MudListItem Icon="@Icons.Material.Filled.AutoAwesomeMosaic" IconColor="Color.Primary" Class="pl-6" Href="/getting-started/layouts">
                        <MudText Typo="Typo.body1">Layouts</MudText>
                        <MudText Typo="Typo.body2">Understand the structure</MudText>
                    </MudListItem>
                </MudList>
                <MudList Clickable="true" Class="flex-grow-1 flex-shrink-0 mud-paper-outlined rounded py-0 ma-2">
                    <MudListItem Icon="@Icons.Material.Filled.FilterFrames" IconColor="Color.Secondary" Class="pl-6" Href="/getting-started/wireframes">
                        <MudText Typo="Typo.body1">Wireframes</MudText>
                        <MudText Typo="Typo.body2">Copy, paste layouts</MudText>
                    </MudListItem>
                </MudList>
            </div>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
<Footer />
